<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../../dist/css/cart.min.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <ul>
            <li class="li1">中兴官网</li>
            <li class="li2">消费者业务</li>
            <li class="li3">运营商业务</li>
            <li class="li4">企业业务</li>
            <li class="li5">登录</li>
            <li class="li6">注册</li>
            <li class="li7">手机商城</li>
        </ul>
    </div>
    <!-- log -->
    <div class="log">
        <ul>
            <li>
                <img src="	https://image.ztemall.com/bb27a3154a9d096e434aae60cd793d88.png" alt="">
            </li>
            <li class="li2">
                <input type="text">
            </li>
            <li class="li3">
                <input type="button" value="搜索">
            </li>
            <li class="li4">
                <input type="button" value="查看购物车">
            </li>
        </ul>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <ul>
            <li class="li1">全部商品分类</li>
            <li class="li2">ZTE中兴专区</li>
            <li class="li3">努比亚专区</li>
            <li class="li4">红魔专区</li>
            <li class="li5">智能手表</li>
            <li class="li6">线下门店</li>
            <li class="li7">线上服务站</li>
            <li class="li8">中兴社区</li>
        </ul>
    </div>
    <!-- 购物车核心部分 -->
    <div class="cart-warp">
        <!-- 头部全选模块 -->
        <div class="cart-thead">
            <div class="t-checkbox">
                <input type="checkbox" name="" id="" class="checkall"> 全选
            </div>
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
        </div>
        <div class="zhongxing">
            <input type="checkbox">
            <span>ZTE中兴</span>
        </div>
        <!-- 商品详细模块 -->
        <div class="cart-item-list">
            <!-- <div class="cart-item check-cart-item" data-good-id="sj1">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" checked class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="../img/7.jpg" alt="">
                    </div>
                    <div class="p-msg">中兴 Axon 40 Ultra</div><br>
                    <p> 颜色：水墨、版本：16GB+1TB、套餐类型：官方标配</p>
                </div>
                <div class="p-price">￥4998</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥12.60</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="../img/7.jpg" alt="">
                    </div>
                    <div class="p-msg">中兴 Axon 40 Ultra</div><br>
                    <p> 颜色：水墨、版本：16GB+1TB、套餐类型：官方标配</p>
                </div>
                <div class="p-price">￥4998</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥24.80</div>
                <div cart-item"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item">
                <div class="p-checkbox">
                    <input type="checkbox" name="" id="" class="j-checkbox">
                </div>
                <div class="p-goods">
                    <div class="p-img">
                        <img src="../img/7.jpg" alt="">
                    </div>
                    <div class="p-msg">中兴 Axon 40 Ultra</div><br>
                    <p> 颜色：水墨、版本：16GB+1TB、套餐类型：官方标配</p>
                </div>
                <div class="p-price">￥4998</div>
                <div class="p-num">
                    <div class="quantity-form">
                        <a href="javascript:;" class="decrement">-</a>
                        <input type="text" class="itxt" value="1">
                        <a href="javascript:;" class="increment">+</a>
                    </div>
                </div>
                <div class="p-sum">￥29.80</div>
                <div class="p-action"><a href="javascript:;">删除</a></div>
            </div> -->
        </div>

        <!-- 结算模块 -->
        <div class="cart-floatbar">
            <div class="select-all">
                <input type="checkbox" name="" id="" class="checkall">全选
            </div>
            <div class="operation">
                <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                <a href="javascript:;" class="clear-all">清理购物车</a>
            </div>
            <div class="toolbar-right">
                <div class="amount-sum">已经选<em>1</em>件商品</div>
                <div class="price-sum">总价： <em>￥12.60</em></div>
                <div class="btn-area">去结算</div>
            </div>
        </div>
    </div>
</body>
<script src="../lib/jquery-1.12.4.min.js"></script>
<script src="../lib/jquery.cookie.js"></script>
<script src="../js/cart.js"></script>
<script>
    $(function() {
        // 1. 全选 全不选功能模块
        // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
        // 事件可以使用change
        $(".checkall").change(function() {
            // console.log($(this).prop("checked"));
            $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            if ($(this).prop("checked")) {
                // 让所有的商品添加 check-cart-item 类名
                $(".cart-item").addClass("check-cart-item");
            } else {
                // check-cart-item 移除
                $(".cart-item").removeClass("check-cart-item");
            }
        });
        // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
        $(".j-checkbox").change(function() {
            // if(被选中的小的复选框的个数 === 3) {
            //     就要选中全选按钮
            // } else {
            //     不要选中全选按钮
            // }
            // console.log($(".j-checkbox:checked").length);
            // $(".j-checkbox").length 这个是所有的小复选框的个数
            if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                $(".checkall").prop("checked", true);
            } else {
                $(".checkall").prop("checked", false);
            }
            if ($(this).prop("checked")) {
                // 让当前的商品添加 check-cart-item 类名
                $(this).parents(".cart-item").addClass("check-cart-item");
            } else {
                // check-cart-item 移除
                $(this).parents(".cart-item").removeClass("check-cart-item");
            }
        });
        // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
        $(".increment").click(function() {
            // 得到当前兄弟文本框的值
            var n = $(this).siblings(".itxt").val();
            // console.log(n);
            n++;
            $(this).siblings(".itxt").val(n);
            // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
            // 当前商品的价格 p  
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            // console.log(p);
            p = p.substr(1);
            // console.log(p);
            var price = (p * n).toFixed(2);
            // 小计模块 
            // toFixed(2) 可以让我们保留2位小数
            $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
            getSum();
        });
        $(".decrement").click(function() {
            // 得到当前兄弟文本框的值
            var n = $(this).siblings(".itxt").val();
            if (n == 1) {
                return false;
            }
            // console.log(n);
            n--;
            $(this).siblings(".itxt").val(n);
            // var p = $(this).parent().parent().siblings(".p-price").html();
            // parents(".p-num") 返回指定的祖先元素
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            // console.log(p);
            p = p.substr(1);
            // console.log(p);
            // 小计模块 
            $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
            getSum();
        });
        //  4. 用户修改文本框的值 计算 小计模块  
        $(".itxt").change(function() {
            // 先得到文本框的里面的值 乘以 当前商品的单价 
            var n = $(this).val();
            // 当前商品的单价
            var p = $(this).parents(".p-num").siblings(".p-price").html();
            // console.log(p);
            p = p.substr(1);
            // $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
            // getSum();
        });
        // 5. 计算总计和总额模块
        getSum();

        function getSum() {
            var count = 0; // 计算总件数 
            var money = 0; // 计算总价钱
            $(".itxt").each(function(i, ele) {
                count += parseInt($(ele).val());
            });
            $(".amount-sum em").text(count);
            $(".p-sum").each(function(i, ele) {
                money += parseFloat($(ele).text().substr(1));
            });
            $(".price-sum em").text("￥" + money.toFixed(2));
        }
        // 6. 删除商品模块
        // (1) 商品后面的删除按钮
        $(".p-action a").click(function() {
            // 删除的是当前的商品 
            $(this).parents(".cart-item").remove();
            getSum();
        });
        // (2) 删除选中的商品
        $(".remove-batch").click(function() {
            // 删除的是小的复选框选中的商品
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum();
        });
        // (3) 清空购物车 删除全部商品
        $(".clear-all").click(function() {
            $(".cart-item").remove();
            getSum();
        })
    })
</script>

</html>